.nom-field {
  display: flex;
  outline: none;

  &.p-plain {
    >.nom-field-label {
      padding: 0;
    }

    >.nom-field-content {
      padding: 0;
    }
  }

  >.nom-field-label {
    padding: 0.5rem 0.5rem;

    >.nom-label {
      display: block;
    }
  }

  >.nom-field-content {
    position: relative;
    flex: 1;
    flex-grow: 1;
    width: 100%;
    padding: 0.5rem 0.5rem;

    &:not(:hover) .nom-field-clear-handler {
      visibility: hidden;
      opacity: 0;
      transition: opacity ease-in 0.1s;
    }

    .nom-field-clear-handler {
      visibility: visible;
      cursor: pointer;
      opacity: 1;
    }


    >.nom-control {


      &:focus-within {
        border-color: var(--nom-color-primary);
      }

      .p-control-width-xsmall& {
        max-width: 104px;
      }

      .p-control-width-small& {
        max-width: 216px;
      }

      .p-control-width-medium& {
        max-width: 328px;
      }

      .p-control-width-large& {
        max-width: 440px;
      }

      .p-control-width-xlarge& {
        max-width: 552px;
      }
    }

    >.nom-control-before.nom-list {
      padding: 0.5rem 0.5rem;
    }

    >.nom-control-after.nom-list {
      padding: 0.5rem 0.5rem;
    }

    .nom-control-extra {
      margin-top: var(--nom-field-gutter-base);
      color: var(--nom-color-text-2);
      word-break: break-all;
    }
  }

  >.nom-field-action.nom-list {
    padding: 0.5rem 0.5rem;
  }

  &.p-inline:not(.nom-group) {
    display: inline-flex !important;
  }

  &.p-required:not(.p-required-mark-optional) {
    >.nom-field-label {
      >.nom-label::before {
        display: inline-block;
        margin-right: 4px;
        color: var(--nom-color-danger);
        font-size: 14px;
        font-family: SimSun, sans-serif;
        line-height: 1;
        content: '*';
      }
    }
  }

  &.s-invalid {
    >.nom-field-content {
      color: var(--nom-color-text-0);

      >.nom-control {
        background-color: rgba(var(--nom-red-5), 0.1);
        border-color: var(--nom-color-danger) !important;

        >input {
          background: transparent;
          border-color: var(--nom-color-danger);
        }
      }
    }
  }

  @media (min-width: @screen-sm-min) {
    &.p-label-align-top {
      flex-direction: column;
    }

    &.p-label-align-right,
    &.p-label-align-left {
      >.nom-field-label {
        flex: 0 0 13rem;
        max-width: 13rem;
        margin-bottom: 0;

        >.nom-label {
          padding: (@padding-y-base);
        }
      }
    }

    &.p-label-align-right {
      >.nom-field-label {
        text-align: right;
      }
    }

    &.p-label-align-left {
      >.nom-field-label {
        text-align: left;
      }
    }
  }

  &.p-span-auto {
    width: auto;
  }
}
